<template>
  <h3>toRefs用法</h3>
  <p>{{ user.sex }} -- {{ user.title.name }}</p>
  <p>{{ sex }} -- {{ title.name }}</p>
  <div class="flex">
    <label class="label">reactive方式实现：</label>
    <el-radio-group v-model="user.sex">
      <el-radio v-for="item in sexList" :key="item.label" :value="item.label">{{
        item.label
      }}</el-radio>
    </el-radio-group>
  </div>
  <div class="flex">
    <label class="label">toRefs方式实现：</label>
    <el-radio-group v-model="sex">
      <el-radio v-for="item in sexList" :key="item.label" :value="item.label">{{
        item.label
      }}</el-radio>
    </el-radio-group>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "CustomToRefs",
  setup() {
    const info = {
      sex: "男",
      title: {
        name: "zhang1",
      },
      obj: {
        age: 16,
      },
    };
    const user = reactive({ ...info });
    const sexList = [
      {
        label: "男",
      },
      {
        label: "女",
      },
    ];
    return {
      ...toRefs(user),
      user,
      sexList,
    };
  },
});
</script>
<style lang="scss" scoped>
.flex {
  width: 100%;
  display: flex;
  align-items: center;
  .label {
    display: inline-block;
    flex: 0 0 140px;
  }
  .el-radio-group {
    flex: 1;
    display: flex;
    .el-radio {
      margin-right: 15px;
    }
  }
}
</style>
